<template>
  <div class="kingwine" ref="homePage">
    <div style="height:60px;display: flex;align-items: center;position: fixed;width: 100%;background: #46d0ca;z-index: 9;top: 45px;">
      <div class="search">
        <div @click="select" class="search_cs">
          <span>{{current}}</span>
          <van-icon name="arrow-down" />
        </div>
        <div class="search_in">
          <form action="/">
            <van-search placeholder="搜索想要的旅游产品或服务" v-model="search_value"  @search="issuecontent" />
          </form>
        </div>
      </div>
    </div>
    <van-popup position="" style="width: 100%;height: 100%;" v-model="show">
      <van-nav-bar title="城市列表" left-arrow @click-left="onClickLeft" />
      <div style="width: 100%;height: 50px;"></div>
      <div class="current">
        <div class="current_box">
          <span>当前城市</span>
          <span style="color: #00CBA6;">{{current}}</span>
        </div>
        <div class="current_box">
          <span>定位城市</span>
          <span style="color: #00CBA6;display: flex;align-items: center;">
            <van-icon name="location" size="16px" />{{chengshi}}</span>
        </div>
      </div>
      <div class="popular">
        <p class="popular_p">热门城市</p>
        <div style="display: flex;flex-wrap: wrap;justify-content: space-around;">
          <div @click="popularCs(itme)" class="popular_cs" v-for="(itme,index) in Popular" :kye='index'>{{itme}}</div>
        </div>
      </div>
      <!-- <div> -->
      <van-index-bar :index-list="nameData">
        <div v-for="(data,index) in ityList" :key="index">
          <van-index-anchor :index="data.id">{{data.name}}</van-index-anchor>
          <van-cell @click="cell(res.name)" v-for="(res,index) in data.content" :key="index" :title="res.name" />
        </div>
      </van-index-bar>

    </van-popup>
    <div class="bj">
      <van-nav-bar @click-left="clickleft" style="background: white;position: fixed;width: 100%;z-index: 11;" title="景酒套餐"
        left-text="" left-arrow>
      </van-nav-bar>
    </div>

    <!-- <div slot="right" class="search">
      </div> -->

    <div style="width: 100%;height: 110px;"></div>
    <!-- <v-search></v-search> -->
    <div v-show="datalist.length == 0"  class="wudingdan" >
        <van-icon name="description"/>
        <p>亲,暂无相关数据哦</p>
    </div>
    <div v-show="datalist.length != 0" class="center">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">

        <div class="card-item" @click="Jumpbuy(itme.resSN,'酒店')" v-for="(itme,index) in datalist" :key='index'>
          <img style="width: 100%;display: block;border-top-right-radius:0.25rem;border-top-left-radius:0.25rem;" :src="itme.Cover" />
          <div class="txt-box">
            <div class="title">
              <p style="font-size: 16px;color: #252525;margin-top: 0.3125rem; margin-bottom: .3rem;">{{itme.Name}}</p>
            </div>
          </div>
          <div class="price-box">
            <p style=" width:290px; 12px;color: #737373;margin-top: 0.125rem; margin-bottom: 0.625rem;">{{itme.Info}}</p>
            <van-button round type="info" color="#46d0ca" size="small">￥<span style="font-size: 16px;">{{itme.Price}}</span>起</van-button>
          </div>
        </div>
      </van-list>


    </div>
    <div style="height: 0.625rem;width: 100%;"></div>
  </div>
</template>

<script>
  // import search from '../search.vue'
  import city from '@/assets/js/city.js'
  import AMap from "AMap"
  import min from '@/views/Min.vue'
  import {
    resourceList
  } from '@/api/home.js'
  export default {
    components: {
      // "v-search": search,
      "v-min": min,
    },
    data() {
      return {
        clintHeigth: '', //获取页面高度
        show: false, //控制城市弹出层
        chengshi: '', //定位
        current: '', //选择城市
        search_value: '', //输入框
        nameData: [ //定义一个索引

          'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V',
          'W',
          'X', 'Y', 'Z'
        ],
        Popular: ['上海', '北京', '广州', '深圳', '武汉', '天津', '西安', '南京', '杭州', '成都', '重庆', '郑州'],
        ityList: city, //城市数组
        datalist:[],
        loading: false, //控制上拉加载的加载动画
        finished: false, //控制在页面往下移动到底部时是否调用接口获取数据
        totalPage: 0,
        pageNumber: 0, //自定义一个变量
      }
    },

    mounted() {
      this.onLoad()
      this.clientHeight = `${document.documentElement.clientHeight}` //document.body.clientWidth;
      // console.log(this.clientHeight);
      // let dd = 100;
      this.$refs.homePage.style.minHeight = this.clientHeight + 'px';
      this.mapinit();
      
    },
    methods: {
      mapinit() { //定位
        let that = this
        let map = new AMap.Map("container", {
          enableHighAccuracy: true,

          resizeEnable: true,
          center: [114.085947, 22.547],
          zoom: 8,
        });
        // document.getElementById('adcode').innerHTML = '当前城市adcode：' + map.getAdcode() + '<br>' +
        //   '当前中心点：' + map.getCenter()
        //获取用户所在城市信息
        function showCityInfo() {
          //实例化城市查询类
          let citysearch = new AMap.CitySearch();
          //自动获取用户IP，返回当前城市
          citysearch.getLocalCity(function(status, result) {
            console.log(result)
            if (status === 'complete' && result.info === 'OK') {

              if (result && result.city && result.bounds) {
                // console.log(JSON.stringify(result));
                let cityinfo = result.city;
                let citybounds = result.bounds;
                that.chengshi = cityinfo
                that.current = cityinfo
                // document.getElementById('info').innerHTML = '您当前所在城市：' + cityinfo;
                //地图显示当前城市
                map.setBounds(citybounds);
              }
            } else {
              // document.getElementById('info').innerHTML = result.info;
              // console.log(result)
            }
          });
        }
        showCityInfo();
      },
      onLoad() {
        let self = this;
        // let mylan = this.lan +','+this.lat
        // console.log(this.lan)
        setTimeout(() => {
          let data = {
            PageNo: self.pageNumber + 1,
            // MyLng: mylan, //经纬度
            Category: 3,
            // City: this.current, //城市
            Name: this.search_value, //搜索
          };
          resourceList(data).then(res => {
            console.log(res)
            self.totalPage = res.PageCount;
            if (res.List.length > 0) {
              self.datalist = self.datalist.concat(res.List);
            } else {
              this.datalist = res.List
            }
            self.loading = false;
            self.pageNumber++;
            if (self.pageNumber >= self.totalPage) {
              self.finished = true;
            }
          });
        }, 500);
      },
      issuecontent() {//搜索
        this.datalist = []
        this.pageNumber = 0;
        this.onLoad();
        this.$forceUpdate();
      },
      select() { //打开选择城市
        this.show = true;
      },
      cell(e) { //选择城市
        this.current = e
        this.show = false;
        this.datalist = []
        this.pageNumber = 0;
        this.onLoad()
        this.$forceUpdate();
      },
      popularCs(e) { //选择热门城市
        this.current = e
        this.show = false;
        this.datalist = []
        this.pageNumber = 0;
        this.onLoad()
        this.$forceUpdate();
      },
      onClickLeft() { //关闭选择城市
        this.show = false;
      },
      Jumpbuy(resSN,title) {
        this.$router.push({
          path: "/Hotel/productDetail",
          query:{
            resSN:resSN,
            title:title,
          }
        })
      },
      clickleft() {
        this.$router.go(-1)
      },
    }
  }
</script>

<style lang="scss">
  .kingwine {
    .bj {
      .van-icon {
        color: white !important;
      }
    }

    .van-popup {
      .van-icon {
        color: white !important;
      }
    }

    .search {
      width: 90%;
      margin: 0 auto;
      display: flex;
      background: white;
      height: 40px;
      border: 1px solid #00CBA6;
      border-radius: 30px;

      .search_cs {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 90px;
      }

      .search_in {
        display: flex;
        align-items: center;
        width: 60%;

        
      }

    }

    .current {
      display: flex;
      padding: 0.625rem 1rem;
      line-height: 2rem;
      font-size: 13px;
      background: #FFFFFF;
      justify-content: space-between;
      color: #999999;

      .current_box {
        width: 50%;
        display: flex;
        justify-content: space-around;

      }
    }

    .popular {
      .popular_p {
        padding: 10px 16px;
        background: #f5f5f5;
        font-size: 13px;
      }

      .popular_cs {
        width: 80px;
        height: 30px;
        margin: 0.625rem 0.625rem;
        border-radius: 1.875rem;
        border: 1px solid #e4e4e4;
        display: flex;
        font-size: 13px;
        align-items: center;
        justify-content: center;
      }
    }

    .sort {
      position: fixed;
      position: fixed;
      width: 100%;
      top: 50px;
      z-index: 999;

      .filter {
        width: 100%;
        height: 240px;
        display: flex;
        flex-direction: column;
        align-items: center;

        .filter_neo {
          display: flex;
          flex-direction: column;
          width: 80%;
          height: 40%;

          .van-checkbox-group {
            display: flex;
          }
        }

        .filter_two {
          display: flex;
          flex-direction: column;
          width: 80%;

          // height: 50%;
          .van-checkbox-group {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            div {
              // width: 33%;
              margin-top: 0.3125rem;
            }
          }
        }
      }
    }

    .list {
      .van-list {
        .commodity {
          position: relative;
          display: flex;
          width: 100%;
          height: 11.375rem;
          /* background: #000000; */
          justify-content: center;
          align-items: center;
          border-bottom: 0.0625rem solid #f2f2f2;

          .commodity-img {
            display: flex;
            width: 40%;
            height: 80%;
            /* align-items: center; */
            /*垂直居中*/
            justify-content: center;

            /*水平居中*/
            img {
              display: flex;
              width: 90%;
              height: 90%;
              border-radius: 0.625rem;
            }
          }

          .commodity-details {
            width: 100%;

            /* display: flex; */
            /* justify-content: center; */
            /* align-items: center; */
            .details-teile {
              height: 1.875rem;
              line-height: 1.875rem;
              font-size: 16px;
            }

            .deleted-content {
              width: 95%;
              margin-top: 0.3125rem;
              font-size: 12px;
              color: #909090;
            }

            .deleted-km {
              display: flex;
              justify-content: space-between;
              margin-top: 0.625rem;
              font-size: 12px;
              color: #909090;
            }
          }
        }
      }
    }

    .center {
      margin-top: 0.625rem;

      .card-item {
        margin: 0.625rem;
        margin-bottom: 0.625rem;
        border-radius: 0.25rem;
        background: white;
        position: relative;
        padding-bottom: 10px;

        .manyidu {
          position: absolute;
          top: 1.25rem;
          left: 0;
          font-size: 12px;
          color: white;
          background: #46d0ca;
          padding: 10px 10px;
          height: 20px;
          line-height: 0px;

        }

        .txt-box {
          display: flex;
          margin: 0 0.625rem;
          align-items: center;
          -moz-box-align: center;
          justify-content: space-between;
        }

        .price-box {
          display: flex;
          justify-content: flex-end;
          padding: 0 10px;

          button {
            width: 120px;
            font-size: 12px;
          }
        }
      }
    }
  }
</style>
